import { View, ViewStyle, TouchableOpacity, Linking } from "react-native"
import { router } from "expo-router"
import { Entypo } from "@expo/vector-icons"

import { Screen, Text } from "@/components"
import { translate } from "@/i18n"
import { useAppTheme } from "@/theme/context"
import { useHeader } from "@/utils/useHeader"

const Settings = () => {
  // const { userStore, systemStore } = useStores()
  // const appVersion = DeviceInfo?.getVersion() || Constants?.expoConfig?.version || "1.0.0"
  const appVersion = "1.0.0"
  const { theme } = useAppTheme()

  useHeader({
    title: "Settings",
    leftIcon: "back",
    onLeftPress: () => router.back(),
  })

  return (
    <Screen preset={"scroll"}>
      <TouchableOpacity
        style={$rowButton}
        onPress={() => {
          Linking.openURL(translate("system:privacyUrl"))
        }}
      >
        <Text tx={"settings:privacyPolicy"} />
        <Entypo name="chevron-thin-right" size={24} color={theme.colors.tint} />
      </TouchableOpacity>
      <TouchableOpacity
        style={$rowButton}
        onPress={() => {
          Linking.openURL(translate("system:agreementUrl"))
        }}
      >
        <Text tx={"settings:privacyUserAgreement"} />
        <Entypo name="chevron-thin-right" size={24} color={theme.colors.tint} />
      </TouchableOpacity>
      <TouchableOpacity
        style={$rowButton}
        onPress={() => {
          Linking.openURL(translate("system:websiteUrl"))
        }}
      >
        <Text tx={"settings:contactSupport"} />
        <Entypo name="chevron-thin-right" size={24} color={theme.colors.tint} />
      </TouchableOpacity>
      <View style={$rowButton}>
        <Text tx={"settings:versionNumber"} />
        <Text>{appVersion}</Text>
      </View>
    </Screen>
  )
}

export default Settings

const $rowButton: ViewStyle = {
  width: "100%",
  flexDirection: "row",
  justifyContent: "space-between",
  padding: 12,
  marginTop: 12,
  alignItems: "center",
}

const $mobileContainer: ViewStyle = {
  flexDirection: "row",
  alignItems: "center",
  gap: 12,
}
